<!DOCTYPE >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf8"/>
    <meta content="width=device-width,user-scalable=no,initial-scale=1.0" name="viewport"/>
    <meta name="-webkit-tap-highlight" content="no"/>
    <meta content="IE=10" http-equiv="x-ua-compatible"/>
    <title>mvc例子</title>
    <script type="text/javascript" src="../../Qmik.all.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style type="text/css">
        .dis-none {
            display: none;
        }

        ul {
            padding-top: 10px;
            border-bottom: 1px solid #cfcfcf;
            margin-bottom: 10px;
        }

        .list {
            min-height: 100px;
        }
    </style>
</head>
<body>
<input type="text" name="user.name" value="leo">

<p> 数据分页加载</p>

<div q-ctrl="page1" class="box">
    <p class="${show}">加载中... ${time}</p>
    <ul q-for="item in list" class="z-template list hide">
        <li>${item.name}-${item.age}</li>
    </ul>
</div>

<script>
    var template = $(".z-template")[0].outerHTML.replace(/[\r\n\t]*/g, "");//取模板
    var page = 1;
    var countPage = 5;
    var mtime = 3;


    $.app().ctrl({
        page1: function (scope) {
            var time = mtime;
            //加载数据
            $.delay(function () {
                scope.list = [];
                for (var i = 0; i <= countPage; i++) {
                    scope.list.push({name: "leo", age: i + 10});
                }
                scope.list = scope.list;
                scope.apply("list");
                $(scope.context).append('<p class="loading" style="text-align: center"></p>')

                $.cycle(function () {
                    //新页面模板
                    loaddata();
                }, time * 1000, 20000);
            }, time * 1000);

            //倒计时 start
            scope.time = time;
            $.cycle(function () {
                scope.time--;
                if (scope.time == 0) {
                    scope.show = "dis-none";
                }
                scope.apply("time");
            }, 1000, (time + 1) * 1000);

            window.scope = scope;

        }//首页控制器
    });
    function loaddata() {
        var key = "list" + (page);
        var temp = template.replace(new RegExp(' q-for="item in list'), ' q-for="item in list' + (page) + '" ');

        if (page <= countPage) {
            scope[key] = scope.list;
            $(scope.context).append(temp);
        }
        $(".loading", scope.context).remove();
        if (page + 2 <= countPage) {
            $(scope.context).append('<p class="loading"  style="text-align: center"></p>');
        }
        page++;
    }

</script>

</body>
</html>